<template>
  <div>
    <el-card>
      <el-button type="success" style="margin-bottom: 20px" @click="showCanpany"
        >添加公司</el-button
      >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="no" label="序号" width="80"></el-table-column>
        <el-table-column
          prop="name"
          label="公司名"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="公司地址"
          width="230"
        ></el-table-column>
        <el-table-column prop="examine" label="审核结果" width="90">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.examine == 1">通过审核</el-tag>
              <el-tag type="warning" v-else-if="scoped.row.examine == 2"
                >未审核</el-tag
              >
              <el-tag type="danger" v-else-if="scoped.row.examine == 3"
                >未通过审核</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="businessLicense" label="营业执照" width="120">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  v-for="item in scoped.row.businessLicense"
                  :src="item"
                  alt
                  style="width: 40px; height: 40px; margin-left: 10px"
                />
              </viewer>
              <span v-if="scoped.row.businessLicense == null" style="color: red"
                >暂无身份证正面照</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="IdCard" label="身份证照片" width="120">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  v-for="item in scoped.row.IdCard"
                  :src="item"
                  alt
                  style="width: 40px; height: 40px; margin-left: 10px"
                />
              </viewer>
              <span v-if="scoped.row.IdCard == null" style="color: red"
                >暂无身份证正面照</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="logo" label="公司logo" width="120">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  :src="scoped.row.logo"
                  alt
                  style="width: 40px; height: 40px; margin-left: 10px"
                />
              </viewer>
              <span v-if="scoped.row.logo == null" style="color: red"
                >暂无公司logo</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_at" label="添加时间"></el-table-column>
        <el-table-column prop="update_at" label="更新时间"></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="showEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handlerDel(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="success"
              size="small"
              @click="handlerCheck(scope.row.id)"
              >公司审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="companyquery.pageSize"
          :current-page="companyquery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          class="management_page"
        ></el-pagination>
      </div>

      <!-- 公司的弹框 -->
      <el-dialog
        :title="companyName"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handlerQu"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleFormRef"
          label-width="155px"
          class="demo-ruleForm"
        >
          <el-form-item label="公司名称：" prop="companyName">
            <el-input
              v-model="ruleForm.companyName"
              placeholder="请输入公司名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司地址：" prop="address">
            <el-input
              v-model="ruleForm.address"
              placeholder="请输入公司地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照：" prop="businessLicense">
            <ele-upload-image
              :action="action"
              v-model="ruleForm.businessLicense"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="getImg"
            ></ele-upload-image>
          </el-form-item>
          <el-form-item label="身份证照片：" prop="IdCard">
            <ele-upload-image
              :action="action"
              v-model="ruleForm.IdCard"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="getImg1"
            ></ele-upload-image>
          </el-form-item>
          <el-form-item label="公司logo" prop="logo">
            <ele-upload-image
              :action="action"
              v-model="ruleForm.logo"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="getImg2"
            ></ele-upload-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handlerQu">取 消</el-button>
          <el-button type="primary" @click="handlerSure">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 公司审核的弹框 -->
      <el-dialog
        title="审核"
        :visible.sync="dialogVisibleCheck"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleFormCheck"
          :rules="rulesCheck"
          ref="ruleRefCheck"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="公司审核" prop="examine">
            <el-select
              v-model="ruleFormCheck.examine"
              placeholder="请选择审核状态"
            >
              <el-option
                v-for="item in checkList"
                :label="item.name"
                :value="item.examine"
                :key="item.examine"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="	所属角色:" prop="roleId">
            <el-select
              v-model="ruleFormCheck.roleId"
              placeholder="请选择所属角色"
            >
              <el-option
                v-for="item in roleSelPageList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handlerexamineQu">取消审核</el-button>
          <el-button type="primary" @click="handlerSureExam"
            >确定审核</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  companyList,
  companyDel,
  roleSelNoPage2,
  companyAdd,
  adminSel,
  companyUpdate,
  companyCheck,
  companyDetail
} from "../../utils/api";
import UploadImg from "../../components/UploadImg";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      action: "https://devicedata.wadd.vip/api/v1.node/uploadImg",

      // 公司列表的数据
      tableData: [],
      // 公司列表的分页
      companyquery: {
        pageNumber: 1,
        pageSize: 10
      },
      //   公司的总条数
      count: 0,
      //   公司的弹框的标题
      companyName: "添加公司",
      //   公司的弹框 显示隐藏
      dialogVisible: false,
      //   公司表单的数据
      ruleForm: {
        companyName: "",
        address: "",
        businessLicense: [],
        IdCard: [],
        id: "",
        logo: []
      },
      //   公司审核的数据
      checkList: [
        {
          examine: 1,
          name: "通过审核"
        },
        {
          examine: 2,
          name: "未审核"
        },
        {
          examine: 3,
          name: "未通过审核"
        }
      ],
      //   公司的检验
      rules: {
        companyName: [
          { required: true, message: "请填写公司名称", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请填写公司地址", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        IdCard: [
          { required: true, message: "请上传身份证照片", trigger: "blur" }
        ],
        logo: [{ required: true, message: "请上传公司logo", trigger: "blur" }]
      },
      //   公司弹框的角色列表
      roleSelPageList: [],
      //   角色id
      roleId: "",
      //   管理员列表数据
      adminSelList: [],
      //   公司审核的弹框
      dialogVisibleCheck: false,
      //   公司审核数据
      ruleFormCheck: {
        examine: "",
        id: "",
        userId: "",
        roleId: ""
      },
      //   公司审核校验
      rulesCheck: {
        examine: [
          { required: true, message: "请选择审核状态", trigger: "blur" }
        ],
        roleId: [{ required: true, message: "请选择所属角色", trigger: "blur" }]
      },
      imageUrl: "",
      fileList: [],
      FreeWorkerList: [] //所属用户的数据
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {}
  },
  created() {
    this.getcompanyList();
    const result = JSON.parse(window.sessionStorage.getItem("userInfo"));
    this.roleId = result.roleId;
  },
  components: {
    UploadImg
  },
  methods: {
    //   获取公司列表
    getcompanyList() {
      this.postRequest(companyList, this.companyquery).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.companyquery.pageSize = val;
      this.getcompanyList();
    },
    handleCurrentChange(val) {
      this.companyquery.pageNumber = val;
      this.getcompanyList();
    },
    // 点击添加公司 显示弹框
    showCanpany() {
      this.companyName = "添加公司";
      this.dialogVisible = !this.dialogVisible;
      this.getroleSelPage();
    },
    // 点击编辑显示弹框 回显数据
    showEdit(id) {
      this.$nextTick(() => {
        this.companyName = "编辑公司";
        this.dialogVisible = !this.dialogVisible;
        const params = {
          id: id
        };
        this.ruleForm.id = id;
        this.postRequest(companyDetail, params).then(res => {
          if (res.code == 200) {
            this.ruleForm.id = res.data[0].id;
            this.ruleForm.companyName = res.data[0].name;
            this.ruleForm.address = res.data[0].address;
            this.ruleForm.adminId = res.data[0].adminId;
            this.ruleForm.businessLicense = res.data[0].businessLicense.split(
              ","
            );
            this.ruleForm.IdCard = res.data[0].IdCard.split(",");
            this.ruleForm.logo = res.data[0].logo.split(",");
          }
        });
        this.getadminSel();
        this.getroleSelPage();
      });
    },
    // 营业执照
    getImg(response, file, fileList) {
      return (this.ruleForm.businessLicense = response.data.src);
    },
    //身份证
    getImg1(response, file, fileList) {
      return (this.ruleForm.IdCard = response.data.src);
    },
    //公司logo
    getImg2(response, file, fileList) {
      return (this.ruleForm.logo = response.data.src);
    },
    // 点击弹框的取消
    handlerQu() {
      this.dialogVisible = false;
      this.$refs.ruleFormRef.resetFields();
    },
    // 获取角色列表
    getroleSelPage() {
      const params = {
        companyId: this.org_id
      };
      this.postRequest(roleSelNoPage2, params).then(res => {
        if (res.code == 200) {
          this.roleSelPageList = res.data;
        }
      });
    },
    // 获取管理列表
    getadminSel() {
      const params = {
        pageNumber: 1,
        pageSize: 100,
        companyId: this.ruleForm.id
      };
      this.postRequest(adminSel, params).then(res => {
        if (res.code == 200) {
          this.adminSelList = res.data;
        }
      });
    },
    // 点击确定判断是添加公司还是删除公司
    handlerSure() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.companyName == "添加公司") {
          this.handlerAdd();
        } else if (this.companyName == "编辑公司") {
          this.handlerEdit();
        }
      });
    },
    // 封装一个添加公司的函数
    handlerAdd() {
      this.postRequest(companyAdd, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加公司成功");
          this.getcompanyList();
          this.dialogVisible = false;
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    // 封装一个编辑公司的函数
    handlerEdit() {
      this.postRequest(companyUpdate, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑公司成功");
          this.getcompanyList();
          this.dialogVisible = false;
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    // 点击删除
    handlerDel(id) {
      const params = {
        userId: window.sessionStorage.getItem("userId"),
        id: id
      };
      this.$confirm("您确定要删除该公司吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(companyDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除公司成功!"
              });
              this.getcompanyList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 公司审核 弹框
    handlerCheck(id) {
      this.ruleFormCheck.id = id;
      this.dialogVisibleCheck = !this.dialogVisibleCheck;
      this.getroleSelPage();
    },
    // 点击确定审核
    handlerSureExam() {
      this.$refs.ruleRefCheck.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        const params = {
          id: this.ruleFormCheck.id,
          examine: this.ruleFormCheck.examine,
          userId: window.sessionStorage.getItem("userId"),
          roleId: this.ruleFormCheck.roleId
        };
        this.postRequest(companyCheck, params).then(res => {
          if (res.code == 200) {
            this.$message.success("审核成功");
            this.getcompanyList();
            this.dialogVisibleCheck = false;
            this.$refs.ruleRefCheck.resetFields();
          }
        });
      });
    },
    // 点击取消审核
    handlerexamineQu() {
      this.dialogVisibleCheck = false;
      this.$refs.ruleRefCheck.resetFields();
      this.$message.error("取消审核");
    },
    handleClose() {
      this.dialogVisibleCheck = false;
      this.$refs.ruleFormRef.resetFields();
      this.ruleForm.businessLicense = [];
      this.ruleForm.IdCard = [];
    },
    handlerImg() {
      this.$router.push("/uploadImg");
    }
  }
};
</script>

<style lang="less" scoped>
.el-form /deep/ .el-form-item__content {
  display: flex;
  flex-direction: row;
  margin-left: 0;
}
.businessCompad {
  margin: 0 10px;
}
</style>
